<template>
	<view class="material-category" align="left">	
		    <view style="float: left" >
		      <van-sidebar v-model="activeKey">
		        <van-sidebar-item v-for="arr in categorys" :title="arr.categoryName" :key="arr.categoryId" @click="onChange(arr.categoryId)"/>
		      </van-sidebar>
		    </view>
		    <view class="material-category-content">
		      <view class="material-category-contents">
				<view>
					<view style="float: left;margin-left: 10px;" v-for="value in items" :key="value.categoryId" @click="categoryDetails(value.categoryId,value.categoryName)">
						<image src="https://img.yzcdn.cn/vant/cat.jpeg" fit="cover" style="width: 120px;height: 120px;"></van-image>
						<view style="font-size: 0.6rem;padding-top: 0.4rem;text-align: center;">{{value.categoryName}}</view>
					</view>
				</view>
		      </view>
		    </view>
	</view>
</template>
<script>
import { getCateGoryList,getBuildingCategorys,getBuildingListAll} from '@/api/customer/local.js'
  import {
    getLeaseList,
    selectRentalServiceList
  } from '@/api/constructionTeam/rental.js'
	export default {
		data() {
			return {
				activeKey: 0,
				categorys: [
					{
						
					}
				],
				items: [
					
				],
				categoryId :null,
				typeid:0,
				
				
			}
		},
		onLoad(openid) {
			this.typeid = openid.typeid
			console.log(openid.id)
			this.distinguish(openid.typeid)
			console.log(this.typeid)
		},
		created() {
			
		},
		methods: {
			 onChange(index) {
				 console.log("我是切换侧边导航 id="+index)
			        this.buildingCategorys(index);
			      },
				distinguish(id){
			        // 建房主材
			        if(id == 0){
			          this.getMaterialList();
				
			          // 家具建材
			        }else if(id == 1){
			          this.getBulidList();									
			        }else{
						this.getList(1)
					}
			      },
			      categoryDetails(id,name){
					  uni.navigateTo({
					  	url:'../index_category_details/index_category_details?categoryId='+id+'&categoryName='+name
						//url:'../index_category_details/index_category_details'
					  })
			      },
			      // 查询建房主材类别列表
			      getMaterialList(){
			        getCateGoryList("0").then((res) => {
			          this.categorys = res.data.data;
					  this.categoryId = res.data.data[0].categoryId;
					  this.getListjia(this.categoryId)
			        });
			      },
			      // 查询家居建材类别列表
			      getBulidList(){
			        getCateGoryList("1").then((res) => {
			          this.categorys = res.data.data;
			          this.categoryId = res.data.data[0].categoryId;
					  this.getListjian(this.categoryId)
			          this.buildingCategorys(this.categoryId);
			        });
			      },
				  
				  // 查询建房主材类别列表
				  // getList(){
				  //   getLeaseList().then((res) => {
						// console.log(res.data.data)
						// this.categorys.categoryId = res.data.data.teamId
						// this.categorys.categoryName = res.data.data.teamName
				  // 	this.categoryId = res.data.data[0].categoryId;
				  	
				  //   });
				  // },
			      // 查询二级类别
			      buildingCategorys(cateGoryId){
			        getBuildingCategorys(cateGoryId).then((res) =>{
			          this.items = res.data.data;
			        })
			      },
				getListjian(){
					getBuildingCategorys("35").then((res) =>{
					  this.items = res.data.data;
					})
				},
				getListjia(){
					getBuildingCategorys("33").then((res) =>{
					  this.items = res.data.data;
					})
				}
		}
	}
</script>
<style lang="scss">

	.demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 45px;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 12px;
	    left: 16px;
	    width: 24px;
	    height: 24px;
	    cursor: pointer;
	  }
	  .material-category-content{
	    margin-left: 80px;
	    padding: 0.5rem;
	  }
		.sideCilck:hover{
			background-color: red($color: #000000);
		}
</style>
